<template>
  <div id="enrollStudentSet-intentionLevel">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">意向级别</span>
      </div>
      <div class="cr-head-right">
        <!-- <el-button type="primary" size="mini" @click="handAdd">{{
          $t("enrollStudentSet.enrollStuSettings.ClientType.50zg4h5diyk0")
        }}</el-button> -->
      </div>
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="tableDiv" ref="auto_height_table">
        <settingTableCont :tableData="tableList">
          <!-- 按钮操作组********start -->
          <el-table-column
            ref="fixedColumn"
            :label="
              $t('enrollStudentSet.enrollStuSettings.ClientType.50zg4h5dm9c0')
            "
            align="center"
            width="120px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="handEdit(scope.row)"
                >{{
                  $t(
                    "enrollStudentSet.enrollStuSettings.ClientType.50zg4h5dmm00"
                  )
                }}</el-button
              >
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </settingTableCont>
      </div>
    </div>

    <popTips
      :dialogVisable="editVisible"
      :popTipsCont="editContent"
      @handCancel="editVisible = false"
      @handConfirm="handConfirm"
      @handleCloseTip="editVisible = false"
      width="600px"
      v-if="editVisible"
    >
      <template slot="content">
        <el-form label-width="100px" ref="formData" :model="form">
          <el-form-item class="level-item" label="意向级别：">
            <div style="padding-top: 12px">
              <el-rate
                v-model="rowInfo.intentlevel_starnum"
                disabled
                :icon-classes="[
                  'mh-start_filled',
                  'mh-start_filled',
                  'mh-start_filled',
                ]"
                disabled-void-icon-class="mh-start_border"
                :colors="['#99A9BF', '#F7BA2A', '#F78F0E']"
              >
              </el-rate>

              <div class="tips-cont">
                <div class="flex-al fs12">
                  <span class="mr10">例如</span>
                  <el-rate
                    :value="3"
                    disabled
                    :icon-classes="[
                      'mh-start_filled',
                      'mh-start_filled',
                      'mh-start_filled',
                    ]"
                    disabled-void-icon-class="mh-start_border"
                    :colors="['#99A9BF', '#F7BA2A', '#F78F0E']"
                  >
                  </el-rate>
                  <span class="mr20">表示意向度一般</span>
                  <el-rate
                    :value="4"
                    disabled
                    :icon-classes="[
                      'mh-start_filled',
                      'mh-start_filled',
                      'mh-start_filled',
                    ]"
                    disabled-void-icon-class="mh-start_border"
                    :colors="['#99A9BF', '#F7BA2A', '#F78F0E']"
                  >
                  </el-rate>
                  <span class="mr20">表示意向度较高</span>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            prop="intentlevel_remark"
            label="级别说明："
            :rules="[
              { required: true, message: '请输入级别说明' },
              {
                min: 1,
                max: 25,
                message: '长度在1到25个字符',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              clearable
              type="textarea"
              placeholder="请输入级别说明"
              v-model="form.intentlevel_remark"
              style="width: 360px"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
    </popTips>
  </div>
</template>

<script>
import settingTableCont from "@/components/tables/settingTableCont.vue";
import popTips from "@/components/common/popTips/popTips.vue";
import setHttp from "../../Set";

export default {
  name: "setting",
  components: {
    settingTableCont,
    popTips,
  },
  data() {
    return {
      editVisible: false,
      editContent: {
        title: "意向级别设置",
        content: "",
        btn_text1: "确定",
        btn_text2: "取消",
      },
      rowInfo: {}, //表格单条信息
      form: {
        intentlevel_remark: "", //级别说明
      },

      // 表格数据
      tableList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0,
        },
      },
    };
  },
  created() {
    this.intentionLevelList();
  },
  watch: {
    editVisible (v) {
      if (!v) {
        this.$refs['formData'].resetFields()
      }
    }
  },
  methods: {
    //编辑
    handEdit(v) {
      console.log(v);
      this.rowInfo = { ...v };
      this.form.intentlevel_remark = v.intentlevel_remark
      this.editVisible = true;
    },
    handConfirm() {
      this.$refs["formData"].validate((v) => {
        if (v) {
          this.onEditSubmit();
        } else {
          return;
        }
      });
    },
    // 招生相关设置->获取名单类型列表 -- wgh
    intentionLevelList() {
      setHttp.intentionLevelList({}).then((res) => {
        const { error, errortip, result } = res.data;
        const { field, list } = result;
        this.tableList.columns = field;
        if (error == 0) {
          this.tableList.list = list;
        } else {
          this.tableList.list = [];
          this.tableList.options.errortip = errortip;
        }
      });
    },

    //侧边弹窗 - 编辑 - 提交
    onEditSubmit() {
      setHttp
        .editIntentionLevelAction({
          intentlevel_id: this.rowInfo.intentlevel_id,
          intentlevel_remark: this.form.intentlevel_remark,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({
              message: res.data.errortip,
              type: "success",
            });
            this.intentionLevelList();
            this.editVisible = false;
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    //侧边弹窗-关闭
    handleClose(done) {
      done();
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 55
        );
      }
    });
  },
};
</script>

<style lang="less" scoped>
.labelName-list {
  .icon-add,
  .icon-remove {
    font-size: 24px;
    margin-left: 12px;
    vertical-align: middle;
    cursor: pointer;
    &.icon-add {
      color: #f78f0e;
    }
    &.icon-remove {
      color: red;
    }
  }
}
form {
  .useMark {
    color: #aaaaaa;
    margin-left: 48px;
    &.max-userMark {
      margin-left: 12px;
    }
  }
}
</style>
<style lang="less">
#enrollStudentSet-intentionLevel {
  .mh-start_border {
    display: none;
  }
}
</style>
